<template>
	<view :style="objColor" v-if="pageApiObj">
		<!-- homeSub/pages/priceDetail/priceDetail.wxml -->
		<view class="top-nav">
			<view class="title">
				{{gunDetail.gunName || '未命名'}}
				<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/slow.png"
					v-if="gunDetail.gunType === 2"></image>
				<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/fast.png"
					v-if="gunDetail.gunType === 1"></image>
				<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/exceed.png"
					v-if="gunDetail.gunType === 3"></image>
				<text class="item_type" v-if="gunDetail.currentMode === 2">交流</text>
				<text class="item_type2" v-if="gunDetail.currentMode === 1">直流</text>
				<text class="item_type" v-if="gunDetail.currentMode === 3">交直流一体</text>
				<text class="item_type2" v-if="gunDetail.currentMode === 4">无线设备</text>
				<text class="item_type" v-if="gunDetail.currentMode === 5">其他</text>
			</view>
			<view class="item">
				<text>桩名称：</text>
				<text>{{gunDetail.pileName || '未命名' }}</text>
			</view>
			<view class="item" @tap="copyText" :data-text="gunDetail.pileNum">
				<text>桩编号：</text>
				<text>{{gunDetail.pileNum}} |
					<text class="copy">复制</text>
				</text>
			</view>
			<view class="item">
				<text>电 流：</text>
				<text>{{gunDetail.current}}A</text>
			</view>
			<view class="item">
				<text>电 压：</text>
				<text>{{gunDetail.valleyVol}}V-{{gunDetail.peakVol}}V</text>
			</view>
			<view class="item">
				<text>最大功率：</text>
				<text>{{gunDetail.maxPower}}kw</text>
			</view>
		</view>

		<view class="echart">
			<view class="title">最近24小时内电价变化情况</view>
			<l-echart ref="constituteCanvas"></l-echart>
		</view>


		<view class="box-info">
			<view class="title">电价收费详情</view>
			<view class="t1">
				<text>收费时段</text>
				<text>费用(元/度)  =  电费  +  服务费</text>
			</view>

			<!-- 831价格收费详情抽离组件 -->
			<priceDetailView :itemData="gunDetail.powerStageDetail"></priceDetailView>
		</view>

		<!-- #V2G功能 -->
		<view v-if="isV2GOption && isDisCharge" class="box-info" style="margin-top: 32rpx;">
			<view class="title">放电收益详情</view>
			<view class="t1">
				<text>收费时段</text>
				<text>费用(元/度)</text>
			</view>

			<!-- 831价格收费详情抽离组件 -->
			<priceDetailView isDisCharge :itemData="gunDetail.dischargePowerStageDetail"></priceDetailView>
		</view>


		<!-- 831底部价格显示修改 -->
		<view class="btnList_831">
			<!-- 营销获客未开启 -->
			<view>
				<!-- 先判断 是否有专享价 -->
				<view class="price_view yyy" v-if="currentPriceNow.exclusiveDiscount">
					<view class="item_v zxj">
						<!-- <view class="c_view">
							当前电价
							<text class="current_view">
								¥<text class="current_t">{{ currentPriceNow.sweepPriceStr }}</text>/度
							</text>
						</view> -->
						<!-- 专享价 -->
						<view class="img_view_831_bg">
							<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/zxj_bg.png"
								mode="scaleToFill" />
							<view class="v_text">
								<text>
									¥{{ currentPriceNow.exclusivePriceStr }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="price_view www" v-else>
					<template>
						<view class="item_v zdyh_dkh">
							<view class="c_view">
								当前电价
								<text class="current_view">
									¥<text
										class="current_t">{{ currentPriceNow.discount ? currentPriceNow.currentPriceStr : currentPriceNow.sweepPriceStr}}</text>/度
								</text>

								<text class="hxj_view"
									v-if="currentPriceNow.discount || currentPriceNow.growthleDiscount  || currentPriceNow.payleDiscount || currentPriceNow.contractDiscount">
									¥{{ currentPriceNow.sweepPriceStr }}
								</text>
							</view>
							<!-- 大客户价展示条件 -->
							<view class="img_view_831_bg" v-if="currentPriceNow.contractDiscount">
								<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/dkh_bg.png"
									mode="scaleToFill" />
								<view class="v_text">
									<text>
										¥{{ currentPriceNow.contractPriceStr }}
									</text>
								</view>
							</view>
							<!-- 成长会员价展示 -->
							<view class="img_view_831_bg" v-if="currentPriceNow.growthleDiscount">
								<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-huiyuan.png"
									mode="scaleToFill" />
								<view class="v_text">
									<text>
										¥{{ currentPriceNow.growthlePriceStr }}
									</text>
								</view>
							</view>
							<!-- 付费会员价展示 -->
							<view class="img_view_831_bg" v-if="currentPriceNow.payleDiscount">
								<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-vip.png"
									mode="scaleToFill" />
								<view class="v_text">
									<text>
										¥{{ currentPriceNow.paylePriceStr }}
									</text>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>

			<!-- #V2G功能 -->
			<view class="btn" @click="goGunDetail()">{{ isV2GOption && isDisCharge ? '前往充放电' : '前往充电' }}</view>
		</view>

	</view>
</template>

<script>
	'use strict';
	// exports.__esModule = true; // homeSub/pages/priceDetail/priceDetail.ts
	var app = getApp();
	var https_1 = require('./../../../api/https.js');
	import * as echarts from 'echartsPages/static/js/echarts.js'
	import lEchart from '../../components/lime-echart/components/l-echart/l-echart'

	// 电价收费详情
	import priceDetailView from '../../../components/priceDetailView/pileDetailView.vue'

	export default {
		components: {
			lEchart,
			priceDetailView,
		},
		data() {
			return {
				// 当前价格对象
				currentPriceNow: {},

				stationId: 0,
				gunId: 0,
				gunDetail: {},
				currentPrice: {},
				isDisCharge: false, // 是否可放电 #V2G功能
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options.gunId) {
				this.gunId = options.gunId
				this.stationId = options.stationId
				this.platformNo=options.platformNo || ''
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getStationGunPriceDetail(this.gunId);
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			async init_constituteCanvas() {
				let data = this.gunDetail
				let option = {
					tooltip: {
						//鼠标触摸显示值
						trigger: "axis",
						valueFormatter: (value) => {
							if(this.isSellerXc()) {
								return Number(value).toFixed(4) + '元'
							} else {
								return Number(value).toFixed(3) + '元'
							}
							
						}
					},
					series: [{
						barWidth: 14,
						data: data.currentPrice,
						type: "line",
						color: this.objColor2.textColor,
						itemStyle: {
							// normal: {
							// 	label: {
							// 		show: true, //开启显示
							// 		position: 'top', //在上方显示
							// 		textStyle: {
							// 			//数值样式
							// 			color: '#6DB12E',
							// 			fontSize: 12,
							// 		},
							// 	},
							// },
						},
					}],
					grid: { // 让图表占满容器
						top: "30px",
						left: "30px",
						right: "20px",
						bottom: "30px"
					},
					xAxis: {
						data: data.timeList,
						type: "category",
						axisTick: {
							show: true, //刻度线
						},
						axisLine: {
							lineStyle: {
								color: '#DCDFE6'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#707485'
							}
						}
					},
					yAxis: {
						type: "value",
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						},

					},
				}
				// this.$refs.constituteCanvas.init(echarts, constituteCanvas => {
				// 	constituteCanvas.setOption(option);
				// });

				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.constituteCanvas.init(echarts, constituteCanvas => {
							console.log(constituteCanvas, 'constituteCanvas..........')
							constituteCanvas.setOption(option);
						});
					})
				})
			},

			/**
			 * 开始充电
			 */
			startCharg: function() {
				uni.navigateTo({
					url: '/echartsPages/pages/terminal/pileDetail/pileDetail?pileNo=' + this.gunDetail.pileNum + "&platformNo=" + this.platformNo
				});
			},

			//枪详情
			goGunDetail: function() {
				console.log(this.gunDetail, '枪信息...')

				if (this.gunDetail.gunState == 7 || this.gunDetail.gunState == 3 || this.gunDetail.gunState == 5 || this
					.gunDetail.gunState == 6) {
					uni.navigateTo({
						url: '/homeSub/pages/terminal/fault/fault?pileNo=' + this.gunDetail.pileNum + '&gunid=' + this
							.gunDetail.gunId + '&status=' + this.gunDetail.gunState + '&stationId=' + this.stationId + "&platformNo=" + this.platformNo
					});
				} else {
					uni.navigateTo({
						url: '/homeSub/pages/terminal/gunDetail/gunDetail?status=' + this.gunDetail.gunState + '&pileNo=' +
							this.gunDetail.pileNum + '&gunNo=' + this.gunDetail.gunNo + '&stationId=' + this.stationId + "&platformNo=" + this.platformNo
					});
				}
			},

			copyText(e) {
				console.log(e)
				uni.setClipboardData({
					data: e.currentTarget.dataset.text
				});
			},

			//获取站点详情(查询枪最低价格信息)
			getStationGunPriceDetail: function(gunId) {
				var that = this;
				let getApiUrl = uni.getStorageSync('token') ? https_1.getStationGunDetails : https_1
					.getStationGunDetailsNotAuth
				getApiUrl(gunId).then((res) => {
					if (res.code == 0) {
						this.gunDetail = res.data || {};

						//当前价格对象
						this.currentPriceNow = res.data.currentPriceNow

						// #V2G功能
						if (this.isV2GOption && res.data.dischargePowerStageDetail && res.data.dischargePowerStageDetail.length) {
							this.isDisCharge = true
						}

						this.currentPrice = this.gunDetail?.powerStageDetail.filter(item => {
							return item.now
						})[0]
						this.init_constituteCanvas();

						//页面加载最慢的请求结束后再显示
						that.pageApiObj = true
					}
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: "none",
						duration: 2000,
					})
				})
			}
		}
	};
</script>
<style lang="less">
	@import url('./pileDetail.less');


	/*站点优惠价格样式*/
	.yhimg_box {
		width: 40rpx;
		height: 40rpx;
		// margin-right: 16rpx;
		position: relative;

		.discount_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
		}

		.vip_text {
			position: absolute;
			top: 40%;
			left: 55%;
			transform: translate(-50%, -50%);
			font-size: 16rpx;
			font-family: DIN-BlackItalic;
			font-weight: 600;
			// font-style:italic;
			color: #A65424;
		}
	}

	@import url('./pileDetail-discount.less');
</style>